<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/element-ui.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/common.css" />
</head>
<body>
    <div id="app">
        <!--<el-row style="text-align: center;">

            <el-col>
                <form id="ffc" method="post"  enctype="multipart/form-data">
                    <div style="margin-top: 20px;">
                        下载路径:<input class="easyui-filebox" name="multi" style="width:170px" data-options="buttonText:'选择章节',required:true"><br/>
                    </div>
                </form>
            </el-col>
        </el-row>-->
        <el-row>
            <el-col>
                <!--<el-upload
                    class="upload-demo"
                    action="/dzjap/ud/save"
                    :before-upload="beforeUpload"
                    :on-perview="handlePreview"
                    :on-remove="handleRemove"
                    :headers="headers"
                    :limit="3"
                    :on-exceed="handleExceed"
                    :file-list="fileList">
                    <button size="small" type="primary">点击上传2</button>
                </el-upload>-->
                <el-container style="border:none">
                    <el-button type="primary" style="width:100px;" @click="selectFile()">选择文件</el-button>
                    <input type="file" id="excel"ref="head" @change="checkType()" enctype="multipart/form-data"/>
                    <span style="margin-top: 10px;margin-left: 20px;">{{fileName}}</span>
                </el-container>

                <div class="divfh">
                <el-button type="primary" @click="uploadExcel()" icon="el-icon-upload2 el-icon-right">上传</el-button>
                <el-button type="primary" @click="dialogImportVisible = false" class="fhbtn">返回</el-button>
                </div>

            </el-col>
        </el-row>
    </div>
</body>
<script src="../js/vue.js"></script>
<script src="../js/element-ui.min.js"></script>
<script src="../js/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                fileName: ''
            }
        },
        computed: {
            headers(){
                var tmp = {
                    'enctype': 'multipart/form-data'
                }
                return tmp;
            }
        },
        methods: {
            //选取文件
            selectFile(){
                this.$refs.head.click();
            },
            //检查上传类型
            checkType() {
                let vm = this;
                let allImgExt = '.xls|.xlsx|';
                let filePath = this.$refs.head.value;
                let extName = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
                if (allImgExt.indexOf(extName + '|') === -1) {
                    this.$message("请选择正确的Excel文件");
                    this.$refs.head.value = '';
                    excelContent = [];
                    return;
                }
                let file = this.$refs.head.files[0];
                this.fileName = file.name;

            },
            uploadExcel(){
                let that = this;
                let formData = new FormData();
                let file = this.$refs.head.files[0];
                if (file == "" || file == undefined) {
                    this.$message("请选择要导入的Excel文件");
                    return;
                }
                formData.append('file', file);
                formData.append('id',"打野");
                console.log(formData.get('file'))
                axios({
                    url: "/dzjap/ud/save",
                    method: "post",
                    enctype: 'multipart/form-data',
                    data: formData,
                    processData: false, //重要
                    contentType: false, //重要
                    // dataType: 'json'
                }).then((res) => {
                    console.log(res)
                    console.log(res.data.code)
                    if (res.data.msg == "操作成功") {
                        this.$message({
                            message: '上传成功',
                            type: 'success'
                        });
                    } else if(res.data.msg == "操作失败") {
                        this.$message.error('上传失败');
                    } else {
                        this.$message({
                            showClose: true,
                            duration: 0,
                            message: '重复文号:'+res.data.msg,
                            type: 'warning'
                        });
                    }
                }).catch(() => {
                        this.$message.error('网络超时, 请重新加载!')
                });

                // return false  //屏蔽了action的默认上传
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning('当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件');
            },
            beforeRemove(file, fileList) {
                return this.$confirm('确定移除 ${ file.name }？');
            }
        }
    })
</script>
</html>